<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击反馈</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center;
        }
        .monster {
            margin-top: 300px;
            width: 200px;
            cursor: pointer;
            transform: scale(1.4);
        }
        .number {
            position: absolute;
            color: red;
            font-size: 33.6px;
            animation: floatUp 1s ease-out forwards;
            pointer-events: none;
        }

        @keyframes floatUp {
            0% {
                opacity: 1;
                transform: translateY(0);
            }
            100% {
                opacity: 0;
                transform: translateY(-50px);
            }
        }
    </style>
</head>
<body>
  <div id="sidePanel" style="
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100%;
    background-color: #f0f0f0;
    box-shadow: 2px 0 5px rgba(0,0,0,0.3);
    padding: 20px;
    z-index: 999;
    overflow-y: auto;
  ">
    <p>玩家的数值</p>

    <div style="margin-top: 20px;">
      <div>
        <label style="color: #6A5ACD">典雅：<span id="val-elegant-mon">0</span></label><br>
        <input type="range" id="elegant-mon" min="0" max="300" value="0" style="width: 100%;">
      </div>
      <div>
        <label style="color: #FF69B4">甜美：<span id="val-sweet-mon">0</span></label><br>
        <input type="range" id="sweet-mon" min="0" max="300" value="0" style="width: 100%;">
      </div>
      <div>
        <label style="color: #00CED1">清新：<span id="val-fresh-mon">0</span></label><br>
        <input type="range" id="fresh-mon" min="0" max="300" value="0" style="width: 100%;">
      </div>
      <div>
        <label style="color: #DC143C">性感：<span id="val-sexy-mon">0</span></label><br>
        <input type="range" id="sexy-mon" min="0" max="300" value="0" style="width: 100%;">
      </div>
      <div>
        <label style="color: #4682B4">帅气：<span id="val-cool-mon">0</span></label><br>
        <input type="range" id="cool-mon" min="0" max="300" value="0" style="width: 100%;">
      </div>
    </div>
      <br><br><br>
      <p>小怪兽面板数值</p>
    <div style="margin-top: 20px;">
      <div>
        <label style="color: #9370DB">典雅：<span id="val-elegant">0</span></label><br>
        <input type="range" id="elegant" min="0" max="300" value="0" style="width: 100%;">
      </div>
      <div>
        <label style="color: #FFB6C1">甜美：<span id="val-sweet">0</span></label><br>
        <input type="range" id="sweet" min="0" max="300" value="0" style="width: 100%;">
      </div>
      <div>
        <label style="color: #40E0D0">清新：<span id="val-fresh">0</span></label><br>
        <input type="range" id="fresh" min="0" max="300" value="0" style="width: 100%;">
      </div>
      <div>
        <label style="color: #FF4500">性感：<span id="val-sexy">0</span></label><br>
        <input type="range" id="sexy" min="0" max="300" value="0" style="width: 100%;">
      </div>
      <div>
        <label style="color: #5F9EA0">帅气：<span id="val-cool">0</span></label><br>
        <input type="range" id="cool" min="0" max="300" value="0" style="width: 100%;">
      </div>
    </div>
    <br><br>
    <div>
      <label style="display: flex; align-items: center; gap: 8px;">
        <input type="checkbox" id="switchMode" />
        <span id="modeText">开启单数字模式</span>
      </label>
    </div>
  </div>
<img src="" alt="">
<img src="./小怪兽.png" alt="小怪兽" class="monster" id="monster" style="margin-left: 240px;">

<script>
    let singleMode = false;
    const monster = document.getElementById('monster');

    monster.addEventListener('click', () => {
      // 只弹出一组5个颜色不同的数字，位置稍微随机分布在怪兽头顶附近
      const rect = monster.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const baseY = rect.top - 30;

      const getValue = id => parseInt(document.getElementById(id).value);
      const types = [
        { id: 'elegant', mon: 'elegant-mon', color: '#6A5ACD' },
        { id: 'sweet', mon: 'sweet-mon', color: '#FF69B4' },
        { id: 'fresh', mon: 'fresh-mon', color: '#00CED1' },
        { id: 'sexy', mon: 'sexy-mon', color: '#DC143C' },
        { id: 'cool', mon: 'cool-mon', color: '#4682B4' },
      ];

      const groupDiv = document.createElement('div');
      groupDiv.style.position = 'absolute';
      groupDiv.style.left = `${centerX}px`;
      groupDiv.style.top = `${baseY}px`;
      groupDiv.style.transform = 'translate(-50%, 0)';
      groupDiv.style.zIndex = 1000;

      if (singleMode) {
        // 计算每种类型的伤害和颜色
        const result = types.map(({ id, mon, color }) => ({
          color,
          value: Math.max(getValue(mon) - getValue(id), 0)
        })).filter(item => item.value > 0);

        const total = result.reduce((sum, item) => sum + item.value, 0);
        const gradientColors = result.map(item => item.color).join(', ');

        const dmgEl = document.createElement('div');
        dmgEl.className = 'number';
        dmgEl.style.background = result.length > 1 ? `linear-gradient(to right, ${gradientColors})` : '';
        dmgEl.style.color = result.length === 1 ? result[0].color : 'transparent';
        dmgEl.style.webkitBackgroundClip = result.length > 1 ? 'text' : '';
        dmgEl.style.backgroundClip = result.length > 1 ? 'text' : '';
        dmgEl.style.position = 'absolute';
        dmgEl.style.left = `50%`;
        dmgEl.style.top = `0`;
        dmgEl.innerText = `-${total}`;
        groupDiv.appendChild(dmgEl);
      } else {
        types.forEach(({ id, mon, color }) => {
          const dmg = Math.max(getValue(mon) - getValue(id), 0);
          if (dmg > 0) {
            const dmgEl = document.createElement('div');
            dmgEl.className = 'number';
            dmgEl.style.color = color;
            const angle = Math.random() * 2 * Math.PI;
            const radius = 14 + Math.random() * 16;
            const offsetX = Math.cos(angle) * radius;
            const offsetY = Math.sin(angle) * radius;
            dmgEl.style.position = 'absolute';
            dmgEl.style.left = `calc(50% + ${offsetX}px)`;
            dmgEl.style.top = `${offsetY}px`;
            dmgEl.innerText = `-${dmg}`;
            groupDiv.appendChild(dmgEl);
          }
        });
      }

      document.body.appendChild(groupDiv);
      groupDiv.addEventListener('animationend', () => {
        groupDiv.remove();
      });
    });
  const sliders = [
    { id: 'elegant', val: 'val-elegant' },
    { id: 'sweet', val: 'val-sweet' },
    { id: 'fresh', val: 'val-fresh' },
    { id: 'sexy', val: 'val-sexy' },
    { id: 'cool', val: 'val-cool' },
    { id: 'elegant-mon', val: 'val-elegant-mon' },
    { id: 'sweet-mon', val: 'val-sweet-mon' },
    { id: 'fresh-mon', val: 'val-fresh-mon' },
    { id: 'sexy-mon', val: 'val-sexy-mon' },
    { id: 'cool-mon', val: 'val-cool-mon' },
  ];

  sliders.forEach(({ id, val }) => {
    const slider = document.getElementById(id);
    const valueText = document.getElementById(val);
    slider.addEventListener('input', () => {
      valueText.innerText = slider.value;
    });
  });

  const switchBtn = document.getElementById('switchMode');
  const modeText = document.getElementById('modeText');

  switchBtn.addEventListener('change', () => {
    singleMode = switchBtn.checked;
    modeText.innerText = singleMode ? '已开启单数字模式' : '开启单数字模式';
  });
</script>

</body>
</html>